<template>
	<view v-show="visible">
		<view v-if="Object.keys(bindingUser).length">
			<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
			<z-paging-swiper>
				<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
				<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
				<template #top>
					<view class="text-white">
						<view class="Media Media--center Media--justifyCenter">
							<view class="">
								<u--image :width="57" :height="57" :src="bindingUser.avatar_url"
									shape="circle"></u--image>
							</view>
							<view class="Media-body" style="margin-left: 16px;">
								<view class="Grid Grid--center Grid--justifyCenter">
									<view class="Grid-cell">
										<view class="text-lg"
											style="font-weight: 500;color: #FFFFFF;margin-bottom: 5px;">
											{{bindingUser.nickname}}</view>
										<view class="text-xs" style="font-weight: 400;font-size: 14px;color: #FFD3D3;">
											方案数量 {{bindingUser.article_num}}篇</view>
									</view>
									<!-- status: 1 关注 2 取关 3 用户拉黑 -->
									<view v-if="bindingUser.status === 1" class="text-xs"
										style="text-align:center;width: 60px;height: 24px;background: rgba(255, 255, 255, 0.3);border-radius: 12px;font-weight: 400;font-size: 12px;color: #FFFFFF;line-height: 24px;">
										已关注</view>
								</view>
							</view>
						</view>
						<view v-if="bindingUser.profiles" style="margin-top: 16px;">
							<u--text color="#ffffff"
							:text="bindingUser.profiles"
							size="14" :lines="lines" :suffixIcon="suffixIcon"
							iconStyle="font-size: 14px; color: #ffffff;" @click="toggleText"></u--text>
							<!-- <div class="wrapper">
								<div :class="['text', {'checked': isChecked}]">
									<label class="btn" for="exp1" @click="isChecked = !isChecked"></label>
									{{ bindingUser.profiles }}
								</div>
							</div> -->
							<!-- <textHtml :content="bindingUser.profiles"></textHtml> -->
						</view>
						<view
							style="position: absolute; top: 12px;right: 0;width: 75px;height: 19px;background: linear-gradient( 270deg, #FF9138 0%, #FFB961 100%);border-radius: 12px 0px 0px 12px;line-height: 19px;">
							<u--text color="#ffffff" size="10" suffixIcon="arrow-right"
								iconStyle="font-size: 10px; color: #ffffff;margin: 0 2px;line-height: 19px;"
								text="更多分析师" align="right" @click="goFollow"></u--text>
						</view>
					</view>
					<z-tabs unit="px" ref="tabs" scroll-count="3" :list="tabList" :current="current"
						@change="tabsChange" :active-style="{color: '#E52727'}" :inactive-style="{color: '#666666'}"
						active-color="#E52727" bottom-space="0" tab-width="79px" :bar-width="90" />
				</template>
				<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
				<swiper v-if="isView" class="swiper" :current="current" @transition="swiperTransition"
					@animationfinish="swiperAnimationfinish">
					<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
						<swiper-list-item ref="listItem" componentCurrent="userHomeItem" :tabIndex="index"
							:currentIndex="current" @initData="loadData"></swiper-list-item>
					</swiper-item>
				</swiper>
			</z-paging-swiper>
		</view>
		<view v-else="!Object.keys(bindingUser).length" style="padding-top: 10%;">
			<u-empty mode="list" :icon="list_pic" text="暂无关注分析师">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import SwiperListItem from '@/components/swiper-list-item/swiper-list-item.vue';
	import {
		getUserContentList,
		followList
	} from '@/service/index.js'
	import list_pic from '@/static/images/my/list.png'
	import {
		parseQuery
	} from '@/utils/index.js'
	import textHtml from '../../../text/index.vue'
	export default {
		name: 'userHome',
		components: {
			SwiperListItem,
			textHtml
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
		},
		computed: {
			...mapState({
				token: state => state.login.token,
				userInfo: state => state.login.userInfo
			})
		},
		watch: {
			visible() {
				this.visible && this.initData()
			}
		},
		data() {
			return {
				isChecked: false,
				list_pic,
				tabList: ['全部', '足球', '篮球'],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				isView: false,
				currentMap: {
					0: '',
					1: 3,
					2: 4
				},
				lines: 2,
				suffixIcon: 'arrow-down',
				bindingUser: {}
			}
		},
		created() {

		},
		mounted() {
			this.initData()
		},
		methods: {
			async initData() {
				try {
					await this.$store.dispatch('login/userinfoAction');
					const {
						user_id
					} = parseQuery()
					const {
						data: {
							list,
							total
						}
					} = await followList({
						page: 1,
						limit: 999
					})
					if (user_id) {
						let _v = list.filter(item => user_id == item.user_id)
						if (_v.length) {
							this.bindingUser = _v[0]
						}
					} else {
						if (this.userInfo.last_sale_id) {
							let _v = list.filter(item => this.userInfo.last_sale_id == item.user_id)
							if (_v.length) {
								this.bindingUser = _v[0]
							}
						} else {
							this.bindingUser = list[0] || {}
						}
					}

					uni.setNavigationBarTitle({
						title: `${this.userInfo.wechat_info.title}`
					})

					this.isView = true

				} catch (e) {
					// error
				}
			},
			// 数据加载
			loadData(params) {
				params.sale_id = this.bindingUser.user_id
				params.category_id = this.currentMap[this.current]
				params.wechat_id = this.userInfo.wechat_info.wechat_id
				getUserContentList(params).then(res => {
					console.log(res, 'result')
					this.$refs.listItem[this.current].getData(res.data.list)
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.current = index;
			},
			// swiper滑动中
			swiperTransition(e) {
				this.$refs.tabs.setDx(e.detail.dx);
			},
			// swiper滑动结束
			swiperAnimationfinish(e) {
				this.current = e.detail.current;
				this.$refs.tabs.unlockDx();
			},
			// 如果要通知当前展示的z-paging刷新，请调用此方法
			reloadCurrentList() {
				this.$refs.listItem[this.current].reload();
			},
			toggleText() {
				this.lines = this.lines === 2 ? this.lines = 999 : this.lines = 2
				this.suffixIcon = this.lines === 2 ? this.suffixIcon = 'arrow-down' : this.suffixIcon = 'arrow-up'
			},
			goFollow() {
				uni.navigateTo({
					url: `/pages/user/follow/follow?appid=${this.userInfo.appid}`
				})
			}
		},
		beforeDestroy() {

		}
	}
</script>

<style lang="scss" scoped>
	.swiper {
		height: calc(100% - 51px);
		background: #f3f3f3;
	}

	.text-white {
		padding: 42px 32px 20px;
		background: url('../../../../static/images/user-fa-top-bj.png') no-repeat;
		background-size: 100% 100%;
	}

	
	.wrapper {
	  display: flex;
	  width: 100%;
	  overflow: hidden;
	}
	.text {
	  font-size: 12px;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  text-align: justify;
	  /* display: flex; */
	/*   display: -webkit-box;
	  -webkit-line-clamp: 3;
	  -webkit-box-orient: vertical; */
	  position: relative;
	  line-height: 1.5;
	  max-height: 34px;
	  transition: .3s max-height;
	}
	.text::before {
	  content: '';
	  height: calc(100% - 17px);
	  float: right;
	}
	.text::after {
	  content: '';
	  width: 999vw;
	  height: 999vw;
	  position: absolute;
	  // box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff;
	    margin-left: -100px;
	}
	.btn{
	  position: relative;
	  float: right;
	  clear: both;
	  margin-left: 20px;
	  font-size: 12px;
	  padding: 0;
	  border-radius: 4px;
	  color:  #fff;
	  cursor: pointer;
	  /* margin-top: -30px; */
	}
	.btn::after{
	  content:'展开'
	}
	.text.checked {
		max-height: none;
	}
	.text.checked::after {
		visibility: hidden;
	}
	.text.checked .btn::after {
		content:'收起'
	}
	.text.checked .btn::before {
		visibility: hidden;
	}
	// .exp{
	//   display: none;
	// }
	// .exp:checked+.text{
	//   max-height: none;
	// }
	// .exp:checked+.text::after{
	//   visibility: hidden;
	// }
	// .exp:checked+.text .btn::before{
	//   visibility: hidden;
	// }
	// .exp:checked+.text .btn::after{
	//   content:'收起'
	// }
	.btn::before{
	  content: '...';
	  position: absolute;
	  left: -5px;
	  color: #fff;
	  transform: translateX(-100%)
	}
</style>